<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>讨论</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui2/aui.css" />
    <style>
        body {}
        .blank{
            display: block;
            height:250px;
            background-color: #fff;
        }
        #page1, #page2, #page3{
            position: relative; z-index:1000;
            -webkit-transform: translateX(0%);
            transform: translateX(0%);
            -webkit-transition: all .4s;
            transition: all .4s;
            background-color: #fff;
        }
        #page1.out, #page2.out, #page3.out{
            display:none;
        }
        .summary{
            text-indent: 10px;
        }
        .teacher-class{
            position:relative;
            display: block;
        }
        .teacher-class>span{
            display: block;
            width:180px;
            margin:0 auto;
            margin-top:20px;
            text-align:center;
            font-weight: bold;
            font-size:32px;
            border-bottom:1px solid #CCCCCC;
        }
        .join{
            border:none !important;
            height:80px;
        }
        .aui-list{
            border-top:none;
        }
        .aui-list .aui-list-item:active {
            background-color:#fff;
        }
        .aui-chat{ 
            padding:0.5rem;
        }
    </style>
</head>
<body>
	 <div class="aui-card-list-header aui-padded-t-5 aui-padded-b-5" id="title">
    </div>
    <div id="content" class="aui-card-list-content-padded aui-padded-t-0 aui-padded-b-0 summary" style="color:#7b7b7b;">
    </div>
    <div class="aui-card-list-footer aui-font-size-12" style="color:#999;">
        <div>
            <span id="teacher"></span> &nbsp;&nbsp; <span id="c_time"></span>
        </div>
    </div>
    <div id="discuss_list"></div>
    
    <script id="disscuss_temp" type="text/x-dot-template">
        {{ for(var i = 0;i<it.length;i++){ }}
    	<section class="aui-content-padded">
	        <div class="aui-card-list">
	            <div class="aui-card-list-content-padded">
	            {{=it[i].content}}
	            </div>
	            <div class="aui-card-list-footer">
	            {{=(i+1)+"楼  "+it[i].user_name+"&nbsp;&nbsp;"+it[i].send_time}}
	            </div>
	        </div>
	    </section>
	    {{ } }}
    </script>
</body>
<script src="../../script/doT.min.js"></script>
<script data-main="../../script/main" src="../../script/require.js"></script>
<script type="text/javascript">
    var count = 0;
    var data;
    var index = 2;
    var isbottom = false;//是否到底
    var isRefresh = true;//是否刷新
    apiready = function(){
        require(["zepto","common"],function(){
            data = api.pageParam.data;
            course_id = api.pageParam.info.id;
            token = api.pageParam.info.token;
            $("#title").html(data.title);
            $("#teacher").html("创建老师："+data.teacher);
            $("#c_time").html("创建时间"+data.create_time);
            $("#content").html(data.description);
            sendAjax();
            initChatBox();
            
            api.setRefreshHeaderInfo({
                loadingImg: 'widget://image/refresh.png',
                bgColor: '#ccc',
                textColor: '#fff',
                textDown: '下拉刷新...',
                textUp: '松开刷新...'
            }, function(ret, err) {
                api.refreshHeaderLoadDone();
                if(ret){
                    isbottom = false;
                    isRefresh=true;
                    sendAjax();
                }
            });
            
            api.addEventListener({
                name:'scrolltobottom',
                extra:{
                    threshold:0            //设置距离底部多少距离时触发，默认值为0，数字类型
                }
            }, function(){
                isRefresh = false;
                isbottom?api.toast({
                    msg:'没有更多了'
                }):sendAjax();        
            });
        })
    };
    
    function sendAjax(){
    	var s_data = {
    		values:{
    			token : token,
    			course_id : course_id,
    			appindex:count
    		}
    	}
    	$zb.requestForData(s_data,'resources','listDiscusses',function(ret){
            if(ret.data.length>0){
                if(isRefresh){
                    $("#discuss_list").html(doT.template($("#disscuss_temp").text())(ret.data));
                }else{
                    $("#discuss_list").append(doT.template($("#disscuss_temp").text())(ret.data));
                }
                if(ret.data.length===10){
                    count+=10;
                }else{
                    isbottom = true;
                }
            }
    	});
    }
    
    function initChatBox(){
        var UIChatBox = api.require('UIChatBox');
        UIChatBox.open({
            placeholder: '输入项讨论的内容',
            maxRows: 4,
            texts: {
                sendBtn: {
                    title: '发送'
                }
            },
            styles: {
                inputBar: {
                    borderColor: '#d9d9d9',
                    bgColor: '#f2f2f2'
                },
                inputBox: {
                    borderColor: '#B3B3B3',
                    bgColor: '#FFFFFF'
                },
                sendBtn: {
                    titleColor: '#4cc518',
                    bg: '#999999',
                    activeBg: '#46a91e',
                    titleSize: 14
                }
            }
        }, function(ret, err) {
            if(ret.eventType=="send"){
                submitDiscuss(ret.msg);
                UIChatBox.closeKeyboard();
            }
        });
    }
    
    function submitDiscuss(content){
    	var s_data = {
    		values:{
    			token : token,
    			course_id : course_id,
    			content : content
    		}
    	}
    	$zb.requestForData(s_data,'resources','submitDiscuss',function(ret){
    	   if(ret.status=="OK"){
    	       isRefresh = true;
    	       sendAjax();
    	       setTimeout(function(){
    	           api.pageDown({bottom:true});
    	       },1000)
    	   }else{
    	       api.toast({
	               msg:'提交失败'
               });
    	   }
    	});
    }
</script>
</html>